<template>
	<el-container>
		<!-- aside -->
		<el-aside width="200">
			<h1 class="logo"></h1>
			<el-menu :collapse="collapse"
				class="el-qf-menu"
				:default-active="$route.path">
				<qf-sub-menu :sideMenu="sideMenu"></qf-sub-menu>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- header -->
			<el-header>
				<el-row type="flex"
					class="row-bg"
					justify="space-between">
					<el-col :span="6">
						<div class="grid-content left">
							<i @click="collapse = !collapse"
								:class="['iconfont', collapse?'icon-fold-right':'icon-shouqi1']"></i>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content center">CRM系统</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content right">
							<el-avatar shape="square"
								:size="40"
								:src="avatarUrl"></el-avatar>

							<b>欢迎您:
								<el-dropdown @command="command">
									<span class="nickname">
										{{ userInfo.nickname }}
										<i style="color:#fff"
											class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu>
										<el-dropdown-item divided
											command="charge"
											icon="iconfont icon-VIP4">vip充值</el-dropdown-item>
										<el-dropdown-item divided
											command="mine"
											icon="iconfont icon-icon-test">账号信息</el-dropdown-item>
										<el-dropdown-item divided
											command="product"
											icon="iconfont icon-shangpinguanli">项目管理</el-dropdown-item>
										<el-dropdown-item divided
											icon='iconfont icon-tuichu2'
											@click.native="quit">退出</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</b>
							&nbsp;
							<!-- <b @click="quit"
								class="quit">退出</b> -->
						</div>
					</el-col>
				</el-row>
			</el-header>
			<!-- main -->
			<el-main>
				<!-- 面包屑 -->
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{name:bread.name}"
						v-for="bread in breadCrumb"
						:key="bread.name">
						{{bread.meta.name}}
					</el-breadcrumb-item>
				</el-breadcrumb>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	import { mapState } from "vuex";
	export default {
		computed: {
			...mapState(["userInfo", "sideMenu", "breadCrumb"]),
			avatarUrl() {
				//如果用户没有头像,就使用默认头像,如果有,就使用用户头像;
				return this.userInfo.headimgurl
					? this.userInfo.headimgurl
					: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
			},
		},
		mounted() { },
		data() {
			return {
				collapse: false,
			};
		},
		methods: {
			command(routerName) {
				if (routerName) {
					this.$router.push({ name: routerName })
				}
			},
			cancel() {
				//取消,中断请求
				this.cancelToken();
			},
			quit() {
				//退出登入
				//1.清除token
				localStorage.removeItem("qf-token");
				//2.跳转到登入页
				this.$router.push("/login");
				//3.刷新页面
				location.reload();
			},
		},
	};
</script>
<style scoped lang="less">
.el-header {
	min-height: 60px !important;
	background: linear-gradient(135deg, #4c67ff, #5635df);
	color: #fff;
	font-weight: bolder;
	text-align: center;
	// line-height: 60px;
	line-height: 40px;
	.left {
		text-align: left;

		i {
			font-size: 30px;
			cursor: pointer;
		}
	}
	.center {
		font-size: 30px;
	}
	.el-avatar {
		vertical-align: middle;
		margin-right: 10px;
	}
	.quit {
		color: deeppink;
		text-decoration: underline;
		cursor: pointer;
	}
	.nickname {
		margin-left: 5px;
		color: deepskyblue;
		cursor: pointer;
	}
}

.el-aside {
	background: linear-gradient(135deg, #4c67ff, #5635df);

	color: #333;
	text-align: center;
	// line-height: 200px;
	.logo {
		min-height: 60px;
		background-image: url(http://chst.vip:8081/stu2/img/logo.be8bbddf.png);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position-y: center;
		background-position-x: 40%;
	}
	.subMenu {
		text-align: left;
	}
	/deep/ .el-qf-menu:not(.el-menu--collapse) {
		width: 200px;
		min-height: 500px;

	}
	
}

.el-main {
	background-color: #fff;
	color: #333;
	text-align: center;
	// line-height: 160px;
	.el-breadcrumb{
		margin-bottom:30px;
	}
}

.el-container {
	margin-bottom: 40px;
	height: 100%;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
// 顶栏laout
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
}
</style>
